<template>
    <div>
        <el-table
        :data="tableData"
        style="width:100%;"
        class="margin_b20 margin_t15"
        :cell-style="cellStylePadding0"
        id="bigTable"
        >
        <el-table-column label="客户名称" prop="customeName" min-width="150px"></el-table-column>
        <el-table-column label="客户地址" prop="customAddress" min-width="200px;"></el-table-column>
        <el-table-column
          prop="addReducePercent"
          min-width="130"
          label="增减百分比"
          header-align="center"
          align="right"
        ></el-table-column>
        <el-table-column label="分路计量" header-align="center">
            <el-table-column label="名称" prop="branchName">
                <template slot-scope="scope">
                    <div class="branchWrap">
                        <div v-for="(item,index) in scope.row.branchInfo" :key="index" class="lineHeight28">
                            <div v-for="(citem,cindex) in item.data" :key="cindex">
                                {{citem.thisTime}}
                            </div>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
            label="日期"
            header-align="center"
            align="right"
            min-width="120px"
            prop="lastTimeQty">
                <template slot-scope="scope">
                    <div class="branchWrap">
                        <div v-for="(item,index) in scope.row.branchInfo" :key="index" class="lineHeight28">
                            <div v-for="(citem,cindex) in item.data" :key="cindex">
                                {{citem.thisTime}}
                            </div>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
            label="当前时间"
            header-align="center"
            align="right"
            min-width="120px"
            prop="branchThisTime">
                <template slot-scope="scope">
                    <div class="branchWrap">
                    <div v-for="(item,index) in scope.row.branchInfo" :key="index" class="lineHeight28">
                        <div v-for="(citem,cindex) in item.data" :key="cindex">
                            {{citem.thisTime}}
                        </div>
                    </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="增减量" header-align="center" align="right" prop="addReduceQty">
                <template slot-scope="scope">
                    <div class="branchWrap">
                        <div v-for="(item,index) in scope.row.branchInfo" :key="index" class="lineHeight28">
                            <div v-for="(citem,cindex) in item.data" :key="cindex" class="lineHeight28">
                                {{citem.thisTime}}
                            </div>
                        </div>
                    </div>
                </template>
            </el-table-column>
      </el-table-column>
    </el-table>
    <div>
        <!-- <el-select
            v-model="searchJobType"
            multiple
            collapse-tags
            @change="changeSelect"
            placeholder="请选择类型查询">
            <el-option v-for="(type,ind) in typeList"
            :key=ind
            :label="type.label"
            :value="type.value">
            </el-option>
        </el-select> -->
    </div>
    </div>
</template>
<script>
// export default {
//     data () {
//         return {
//           // searchJobType: ['ALL_SELECT','TSINPUT', '01', '02', '03', '04', '05', '07', '08', '09', '11', '12'],
//           oldSearchJobType: [],
//           typeList: [
//             {value: 'ALL_SELECT', label: '全部'},
//             {value: 'TSINPUT', label: '时序数据采集任务'},
//             {value: '01', label: 'RDBMS → HIVE全量'},
//             {value: '02', label: 'RDBMS → HDFS全量'},
//             {value: '03', label: 'RDBMS → HBASE全量'},
//             {value: '04', label: 'HDFS → RDBMS'},
//             {value: '05', label: 'HIVE  → RDBMS'},
//             {value: '07', label: 'RDBMS → HIVE增量'},
//             {value: '08', label: 'RDBMS → HBASE增量'},
//             {value: '09', label: '文件 → RDBMS'},
//             {value: '11', label: '数据对象 → 数据对象'},
//             {value: '12', label: 'FTP服务器 → 文件系统'},
//         ]
//       }
//     },
//     methods:{
//         changeSelect(val) {
//         const allValues = [];
//         // 保留所有值
//         for (const item of this.typeList) {
//           allValues.push(item.value)
//         }
//         // 用来储存上一次的值，可以进行对比
//         const oldVal = this.oldSearchJobType.length === 1 ? this.oldSearchJobType[0] : [];
//         // 若是全部选择
//         if (val.includes('ALL_SELECT')) this.searchJobType = allValues;
//         // 取消全部选中 上次有 当前没有 表示取消全选
//         if (oldVal.includes('ALL_SELECT') && !val.includes('ALL_SELECT')) this.searchJobType = [];
//         // 点击非全部选中 需要排除全部选中 以及 当前点击的选项
//         // 新老数据都有全部选中
//         if (oldVal.includes('ALL_SELECT') && val.includes('ALL_SELECT')) {
//           const index = val.indexOf('ALL_SELECT');
//           val.splice(index, 1); // 排除全选选项
//           this.searchJobType = val
//         }
//         // 全选未选 但是其他选项全部选上 则全选选上 上次和当前 都没有全选
//         if (!oldVal.includes('ALL_SELECT') && !val.includes('ALL_SELECT')) {
//           if (val.length === allValues.length - 1) this.searchJobType = ['ALL_SELECT'].concat(val)
//         }
//         // 储存当前最后的结果 作为下次的老数据
//         this.oldSearchJobType[0] = this.searchJobType;
//       },
//     }
// }
  export default {
    name: "table4",
    data() {
      return {
        rowspan: "",
        tableData: [
            {
                id: 1,
                customeName: "name-1",
                customAddress:"北京市石景山区",
                addReducePercent:'10%',
                branchName:"ces",
                branchLastTime:'2019-08-09',
                branchThisTime:'2019-07-08',
                branchAddReduceQty:'质量',
                branchAddReducePercent:'10%',
                branchInfo:[{
                        amount: 100,lastTimeQty:'2019-09-08',addReduceQty:"100",thisTimeQty:'1009',
                        data:[{thisTime:'2019-09-08',lastTime:'2019-09-09'},{thisTime:'2019-09-08',lastTime:'2019-09-09'}]
                    }, { 
                    amount: 200,lastTimeQty:'2019-09-08',addReduceQty:"100",thisTimeQty:'1009',
                        data:[{thisTime:'2019-09-08',lastTime:'2019-09-09'},{thisTime:'2019-09-08',lastTime:'2019-09-09'}]
                },{ 
                    amount: 300,lastTimeQty:'2019-09-08',addReduceQty:"100",thisTimeQty:'1009',
                    data:[{thisTime:'2019-09-08',lastTime:'2019-09-09'},{thisTime:'2019-09-08',lastTime:'2019-09-09'}]
                }]
            },
            { 
                id: 2,
                customeName: "name-2",
                customAddress:"北京市石景山区",
                addReducePercent:'10%',
                branchName:"ces1",
                branchLastTime:'2019-08-09',
                branchThisTime:'2019-07-08',
                branchAddReduceQty:'质量',
                branchAddReducePercent:'20%',
                branchInfo:[{
                    amount: 100,lastTimeQty:'2019-09-08',addReduceQty:"100",thisTimeQty:'1009',
                        data:[{thisTime:'2019-09-08',lastTime:'2019-09-09'},{thisTime:'2019-09-08',lastTime:'2019-09-09'}]
                    }, { 
                    amount: 200,lastTimeQty:'2019-09-08',addReduceQty:"100",thisTimeQty:'1009',
                    
                        data:[{thisTime:'2019-09-08',lastTime:'2019-09-09'},{thisTime:'2019-09-08',lastTime:'2019-09-09'}]
                },{ 
                    amount: 300,lastTimeQty:'2019-09-08',addReduceQty:"100",thisTimeQty:'1009',
                    data:[{thisTime:'2019-09-08',lastTime:'2019-09-09'},{thisTime:'2019-09-08',lastTime:'2019-09-09'}]
                }]
            },
            {
                id: 3,
                customeName: "name-3",
                customAddress:"北京市石景山区",
                addReducePercent:'10%',
                branchName:"ces3",
                branchLastTime:'2019-08-09',
                branchThisTime:'2019-07-08',
                branchAddReduceQty:'质量',
                branchAddReducePercent:'30%',
                branchInfo:[{
                    amount: 100,lastTimeQty:'2019-09-08',addReduceQty:"100",thisTimeQty:'1009',
                        data:[{thisTime:'2019-09-08',lastTime:'2019-09-09'},{thisTime:'2019-09-08',lastTime:'2019-09-09'}]
                    }, { 
                    amount: 200,lastTimeQty:'2019-09-08',addReduceQty:"100",thisTimeQty:'1009',
                        data:[{thisTime:'2019-09-08',lastTime:'2019-09-09'},{thisTime:'2019-09-08',lastTime:'2019-09-09'}]
                },{ 
                    amount: 300,lastTimeQty:'2019-09-08',addReduceQty:"100",thisTimeQty:'1009',
                    data:[{thisTime:'2019-09-08',lastTime:'2019-09-09'},{thisTime:'2019-09-08',lastTime:'2019-09-09'}]
                }]
            }
        ]
      }
    },
    methods:{
        cellStylePadding0({ row, column, ronIndex, columnIndex }) {
            if (
                column.property == "branchName" ||
                column.property == "branchLastTime" ||
                column.property == "branchThisTime" ||
                column.property == "branchAddReduceQty" ||
                column.property == "branchAddReducePercent"||
                column.property == "amount"||
                column.property == "lastTimeQty"||
                column.property == "addReduceQty"||
                column.property == "thisTimeQty"
            ) {
                return "padding:0";
            } else {
                return "";
            }
            //console.log(column.property)
        },
        // handleSort(obja, objb) {
        //     let a = this.toPoint(obja.addReducePercent);
        //     let b = this.toPoint(objb.addReducePercent);
        //     console.log(a, b);
        //     if (a > b) {
        //         return 1;
        //     } else {
        //         return -1;
        //     }
        // },
        // /*百分数转小数*/
        // toPoint(percent) {
        //     var str = percent.replace("%", "");
        //     str = str / 100;
        //     return str;
        // },
    }
}
</script>
<style scoped>
.textRadio >>> .el-radio__label {
  display: none;
}
.branchWrap {
  margin: 0 -10px;
}
.branchWrap div {
  padding: 0 10px;
  border-bottom: 1px solid #dfe6ec;
}
.branchWrap div:last-child {
  border: none;
}
.lineHeight28 {
  line-height: 28px;
}
</style>
